import { Button, Modal, Drawer, Spin, Icon } from "view-ui-plus";
import { defineComponent, ref } from "vue";
import type { PropType } from "vue";
import styles from "./index.module.less";

export default defineComponent({
  props: {
    modelValue: {
      type: Boolean,
      dafault: true,
    },
    title: {
      type: String,
      default: "",
    },
    callback: {
      type: Function as PropType<(...res: any) => Promise<any>>,
      default: () => {},
    },
    okText: {
      type: String,
      default: "确定",
    },
    cancelText: {
      type: String,
      default: "取消",
    },
    modelProps: {
      type: Object,
      default: () => {},
    },
    onOnOk: {
      type: Function as PropType<(...res: any) => any>,
      default: () => {},
    },
    onOnCancel: {
      type: Function as PropType<(...res: any) => any>,
      default: () => {},
    },
    loading: {
      type: Boolean,
      default: true,
    },
    width: {
      type: Number,
      default: 1000,
    },
    drawerWidth: {
      type: Number,
      default: 700,
    },
    onOnVisibleChange: {
      type: Function as PropType<(...res: any) => any>,
      default: () => {},
    },
    fullscreen: {
      type: Boolean,
      default: false,
    },
    isDetail: {
      type: Boolean,
      default: false,
    },
    isDrawer: {
      type: Boolean,
      default: false,
    },
  },
  emits: ["update:modelValue", "confirm"],
  setup(props, { emit, slots }) {
    const fullscreen = ref(false);

    const showSpin = ref(false);

    const onFullscreen = () => {
      fullscreen.value = true;
    };

    const closeFullscreen = () => {
      fullscreen.value = false;
    };

    const onOnVisibleChange = (visible) => {
      // showSpin.value = true;
      props.onOnVisibleChange(visible);

      setTimeout(() => {
        //showSpin.value = false;
        fullscreen.value = false;
      }, 500);
    };

    const header = () => {
      const title = props.isDetail ? `${props.title}详情` : props.title;
      return (
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
          }}
        >
          <div
            style={{
              fontSize: "16px",
              height: "20px",
              lineHeight: "20px",
              color: "#17233d",
              fontWeight: 500,
            }}
          >
            {title}
          </div>
          {fullscreen.value ? (
            <i
              style={{ marginRight: "25px", cursor: "pointer" }}
              class="ivu-icon i-icon i-icon-exit-full-screen"
              onClick={closeFullscreen}
            ></i>
          ) : (
            <i
              style={{ marginRight: "25px", cursor: "pointer" }}
              class="ivu-icon i-icon i-icon-full-screen"
              onClick={onFullscreen}
            ></i>
          )}
        </div>
      );
    };

    const renderDetailFooter = () => {
      return (
        <div
          style={{
            display: "flex",
            flexDirection: "row-reverse",
          }}
        >
          <Button onClick={props.onOnCancel}>关闭</Button>
        </div>
      );
    };

    const footer = () => {
      if (props.isDetail) {
        return renderDetailFooter();
      } else if (!!slots.footer) {
        return slots.footer();
      } else {
        return null;
      }
    };

    return () => {
      const title = props.isDetail ? `${props.title}详情` : props.title;
      return (
        <>
          <Modal
            model-value={!props.isDrawer && props.modelValue}
            onOnOk={props.onOnOk}
            onOnCancel={props.onOnCancel}
            loading={props.loading}
            ok-text={props.okText}
            cancel-text={props.cancelText}
            footer-hide={false}
            width={props.width}
            v-slots={{ header: header, footer: footer }}
            fullscreen={fullscreen.value}
            draggable={true}
            reset-drag-position={true}
            onOnVisibleChange={onOnVisibleChange}
          >
            {!props.isDrawer && slots.default && slots.default()}
          </Modal>
          <Drawer
            title={title}
            closable={true}
            model-value={props.isDrawer && props.modelValue}
            onOnClose={props.onOnCancel}
            onOnVisibleChange={onOnVisibleChange}
            width={props.drawerWidth}
          >
            {props.isDrawer && slots.default && slots.default()}

            {showSpin.value && <Spin fix></Spin>}

            <div class={styles["drawer-footer"]}>
              <Button style="margin-right: 8px" onClick={props.onOnCancel}>
                关闭
              </Button>
            </div>
          </Drawer>
        </>
      );
    };
  },
});
